<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-07-03 23:27:48
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-04 00:21:51
-->
<style>
   
</style>
<div class="">
    <div class="title-row layuimini-title ">
        <div class="title-left">
            <h4><span>坐岗预警
                    <i class="layui-icon layui-icon-tips layui-font-grey" lay-on="question_tips"></i>
                    <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs">启用中</button>
                </span></h4>
        </div>
        <div class="title-right">
            <span class="title-right-text">
                <button type="button" class="layui-btn  layui-btn-sm layui-btn-primary ml-3" lay-on="stop">
                    停用
                </button>
            </span>
        </div>
    </div>
    <div class="m-df">

        <section class="right-form-top">
            <div class="form">
                <div class="form-item">
                    <div class="icon"><img src="/assets/images/workforce/time_difference.png"></div>
                    <div class="content">
                        <div class="title">时间
                            <span class="value">10m</span>
                            <span class="text_btn" lay-on="time">
                                <i class="layui-icon layui-icon-edit"></i>编辑</span>
                        </div>
                        <div class="desc">
                            规则：工牌低速持续时长阈值

                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <div class="icon"><img src="/assets/images/workforce/distance_white.png">
                    </div>
                    <div class="content">
                        <div class="title">工牌速度 <span class="value">20m/min</span>
                            <span class="text_btn" lay-on="time">
                                <i class="layui-icon layui-icon-edit"></i>编辑
                            </span>
                        </div>
                        <div class="desc">
                            规则：工牌速度小于设置值

                        </div>
                    </div>
                </div>
            </div>

        </section>



        <form class="layui-form mt-4" action="" lay-filter="search-form">
            <div class="layui-form-item">
                <button type="reset" class="layui-btn  layui-btn-sm layui-btn-normal" id="white">白名单配置
                    <i class="layui-icon layui-icon-tips layui-font-grey" lay-on="white_tips"></i>
                </button>

                <button type="submit" class="layui-btn layui-btn-sm layui-btn-primary" id="time">
                    时间段配置

                    <i class="layui-icon layui-icon-tips layui-font-grey" lay-on="time_tips" @stop></i>
                </button>

                <button type="submit" class="layui-btn layui-btn-sm layui-btn-primary" lay-on="alarm_tips">
                    时间段配置

                    <i class="layui-icon layui-icon-tips layui-font-grey"></i>
                </button>
            </div>
            <div class="layui-form-item" id="whitePage">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" placeholder="请输入" name="nickname" autocomplete="off" class="layui-input">

                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                        lay-filter="data-search-btn">搜索</button>
                    <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                    <button type="submit" class="layui-btn layui-btn-sm">新增白名单</button>
                </div>
            </div>
            <div class="layui-form-item" id="timePage" style="display: none;">
                <div class="layui-inline">
                    <label class="layui-form-label">职位类型</label>
                    <div class="layui-input-inline">
                        <select class="layui-input" lay-append-to="body" placeholder="请选择" name="supplierCodes"
                            lay-search >
                            <option value="1">行政</option>
                            <option value="2">客户服务部负责人</option>
                            <option value="3">安全员</option>
                            <option value="4">运营调度</option>
                            <option value="5">环卫保洁员</option>
                            <option value="6">环卫主管</option>
                            <option value="7">环卫司机</option>
                            <option value="8">综合巡查主管</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                        lay-filter="data-search-btn">搜索</button>
                    <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                    <button type="submit" class="layui-btn layui-btn-sm">新增配置</button>
                </div>
            </div>
        </form>
    </div>
    <div class="section table-stripe">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
    <script type="text/html" id="currentTableBar">
            <a class="layui-font-blue mr-3" lay-event="edit">编辑</a>
            <a class="layui-font-red  mr-3" lay-event="delete">删除</a>
        </script>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniPage = layui.miniPage;
        /******************** 事件 start ********************/

        util.on('lay-on', {
            'time': function () {
                var content = miniPage.getHrefContent('page/workforce/attendanceConfig/components/time.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '时间',
                    type: 1,
                    shade: 0.2,
                    maxmin: false,
                    shadeClose: true,
                    area: ['320px', 'auto'],
                    content: content,
                });
                return false;
            },
            'alarm_tips': function () {
                var content = miniPage.getHrefContent('page/workforce/attendanceConfig/components/alarm.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '产生告警设置',
                    type: 1,
                    shade: 0.2,
                    maxmin: false,
                    shadeClose: true,
                    area: ['420px', 'auto'],
                    content: content,
                });
                return false;
            },
            'white_tips': function () {
                layer.tips(`<div class="t-c  layui-font-black layui-font-16 solid-bottom py-3 mb-3"><b>说明</b></div>
<p class="layui-font-13 layui-font-gray mt-1">1、剔除不适用该规则的人员；</p>`, this, {
                    tips: [2, '#ffffff'],
                    area: ['250px', 'auto']

                });
            },
            'question_tips': function () {

                layer.tips(`<div class="layui-font-13 layui-font-gray">
<p class="mt-1">1）坐岗说明： 坐岗是指作业人员在排期期间内，出勤网格内，长期“不动”的情况；</p>
<p class="mt-1">2）坐岗规则说明： 根据作业人员某段时间工牌的移动速度小于阈值来判断员工是否存在坐岗可能。</p></div>`, this, {
                    tips: [2, '#ffffff'],
                    area: ['350px', 'auto']

                });
            },
            'stop': function () {
                console.log('停止')
            }
        })



        // 缓存常用元素
        const $whiteBtn = $('#white');
        const $timeBtn = $('#time');
        const $whitePage = $('#whitePage');
        const $timePage = $('#timePage');

        // 切换按钮样式和页面显示的通用函数
        function switchTab(activeBtn, inactiveBtn, activePage, inactivePage) {
            inactiveBtn.removeClass('layui-btn-primary layui-btn-normal');
            activeBtn.removeClass('layui-btn-primary layui-btn-normal');
            inactiveBtn.addClass('layui-btn-primary');
            activeBtn.addClass('layui-btn-normal');

            activePage.show();
            inactivePage.hide();
        }

        // 白名单页切换
        $whiteBtn.on("click", function () {
            switchTab($whiteBtn, $timeBtn, $whitePage, $timePage);
        });

        // 时间段页切换
        $timeBtn.on("click", function () {
            switchTab($timeBtn, $whiteBtn, $timePage, $whitePage);
        });

        /******************** 事件 end ********************/

        // tabs 切换后的事件
        function handleTabSwitch(tabIndex) {
            if (tabIndex === 0) {
                $('#periodicPlan').show();
                $('#temporaryPlan').hide();
            } else if (tabIndex === 1) {
                $('#periodicPlan').hide();
                $('#temporaryPlan').show();
            }
        }

        /******************** 渲染组件 start ********************/
        form.render('select'); //刷新select选择框渲染

        /******************** 渲染组件 end ********************/

        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            defaultToolbar: ['filter'],
            cols: [[
                { type: 'numbers', width: 80, title: '序号' },
                { field: 'name', minWidth: 100, title: '姓名' },
                { field: 'sign', minWidth: 100, title: '供应商岗位名称' },
                { field: 'score', minWidth: 80, title: '手机号' },
                { field: 'classify', minWidth: 80, title: '工牌编号' },
                { field: 'time', minWidth: 100, title: '配置时间' },
                { title: '操作', minWidth: 100, toolbar: '#currentTableBar', fixed: 'right', align: "center" }


            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * tool 事件监听
         */
        table.on('tool(currentTableFilter)', function (obj) {
            console.log('tool(currentTableFilter)')
            var data = obj.data;
            console.log('tool(currentTableFilter)====', obj)
            if (obj.event === 'edit') {
                //编辑传值
                layui.sessionData('SHIFT_PARAMS', {
                    key: 'dataDto',
                    value: JSON.stringify(data)
                });
                layui.sessionData('SHIFT_PARAMS', {
                    key: 'pageType',
                    value: 'edit'
                });
                var content = miniPage.getHrefContent('page/workforce/rm/components/shiftLib/add.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '编辑班次',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['600px', 'auto'],
                    content: content,
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确认删除吗', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

        // 开启监听 折叠展开事件
        miniPage.listen()

    });
</script>